import { Modal, Space, Table } from "antd";
import { useMemo, useState } from "react";
import FormComponent from "../FormComponent";

interface ColumnComponentProps {
    column: any[],
    data: any[]
}

const ColumnComponent: React.FC<ColumnComponentProps> = ({ column, data }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [selectedUser, setSelectedUser] = useState<any>({})
    const widgets = useMemo(() => {
        return column.filter(item => item['type']).map(item => ({ ...item }));
    }, [column])

    const Columns = useMemo(() => {
        const newColumns = [...column];
        newColumns.push({
            title: '操作',
            key: 'option',
            render: (_: any, record: any) => (
                <Space size="middle">
                    <a onClick={() => handleOption(record)}>编辑</a>
                </Space>
            )
        });
        return newColumns;
    }, [column]);
    
    const handleClose = () => {
        setIsModalOpen(false);
    };

    function handleOption(value: any) {
        setSelectedUser(value)
        setIsModalOpen(true);
    }

    const changeData = (value : any)=>{
        // setSelectedUser(value)
        // 执行改变数据后的操作
    }

    return (
        <>
            <Table columns={Columns} dataSource={data} />
            <Modal
                title="编辑"
                open={isModalOpen}
                key={selectedUser.id}
                onCancel={handleClose}
                footer={null}
            >
                <FormComponent widgets={widgets} data={selectedUser} changeData={changeData} OpenModal={handleClose}/>
            </Modal>

        </>
    )
}

export default ColumnComponent